window.onload = function () {
    /*初始化页面功能*/
    /*搜索功能*/
    search();
    /*轮播图*/
    banner();
    /*倒计时*/
    downTime();
};

/*搜索功能*/
var search = function () {
    var search = document.querySelector(".jd_search_box");
    var banner = document.querySelector(".jd_banner");
    var height = banner.offsetHeight;

    window.onscroll = function () {
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        var opacity = 0;
        if(top>height){
            opacity = 0.85;
        }else{
            opacity = 0.85*(top/height);
        }
        search.style.backgroundColor = "rgba(216,80,92," + opacity + ")";
    }
};
/*轮播图*/
var banner = function () {
    //无缝滚动
    var banner = document.querySelector(".jd_banner");
    var width = banner.offsetWidth;
    var imgBox = banner.querySelector("ul:first-child");
    var pointBox = banner.querySelector("ul:last-child");
    var points = pointBox.querySelectorAll("li");

    var addTransition = function () {
        imgBox.style.transition = "0.2s all";
        imgBox.style.webkitTransition = "0.2s all";
    };
    var removeTransition = function () {
        imgBox.style.transition = "none";
        imgBox.style.webkitTransition = "none";
    };
    var setTranslateX = function (translateX) {
        imgBox.style.transform = "translateX("+(translateX)+"px"+")";
        imgBox.style.webkitTransform = "translateX("+(translateX)+"px"+")";
    };

    var index = 1;
    var timer = setInterval(function () {
        index++;
        addTransition();
        setTranslateX(-index*width);
    },2000);

    imgBox.addEventListener("transitionend",function () {
        if(index>=9){
            index = 1;
            removeTransition();
            setTranslateX(-index*width);
        }else if(index<=0){
            index = 8;
            removeTransition();
            setTranslateX(-index*width);
        }
        setPoint();
    });

    var setPoint = function () {
        for(var i=0;i<points.length;i++){
            points[i].classList.remove("now");
        }
        points[index-1].classList.add("now");
    };


    //添加滑动事件
    var startX = 0;
    var distanceX = 0;
    //因为点击后也会触发 touchend 事件所以添加一个严谨判断
    var flag = false;
    imgBox.addEventListener("touchstart",function (e) {
        startX = e.touches[0].clientX;
        clearInterval(timer);
    });
    imgBox.addEventListener("touchmove",function (e) {
        flag = true;
        var moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        //banner跟随滑动
        setTranslateX(-index*width+distanceX);

    });
    imgBox.addEventListener("touchend",function (e) {
        if(flag){
            if(Math.abs(distanceX)>width/3){
                console.log(distanceX);
                //距离够了的时候判断滑动方向
                if(distanceX<0){    //向右
                    index++;
                }else{
                    index--;
                }
                addTransition();
                setTranslateX(-index*width);
            } else{
                //距离不够时吸附回去
                addTransition();
                setTranslateX(-index*width);
            }
        }

        /*
            收尾
            添加定时器
            还原数据
             */
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            addTransition();
            setTranslateX(-index*width);
        },2000);
        startX = 0;
        distanceX = 0;
        flag = false;
    });

};
/*倒计时*/
var downTime = function () {
    var skTime = document.querySelector(".sk_time");
    var spanArr = skTime.querySelectorAll("span");

    var startTime = 11*60*60;
    var timer = setInterval(function () {
        startTime--;
        var h = Math.floor(startTime/3600);
        var m = Math.floor(startTime%3600/60);
        var s = Math.floor(startTime%60);
        spanArr[0].innerHTML = Math.floor(h/10);
        spanArr[1].innerHTML = h%10;
        spanArr[3].innerHTML = Math.floor(m/10);
        spanArr[4].innerHTML = m%10;
        spanArr[6].innerHTML = Math.floor(s/10);
        spanArr[7].innerHTML = s%10;
        if(startTime<=0){
            clearInterval(timer);
        }
    },1000);
};

















